<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template>
  <div>
    <!-- 头部导航栏   -->
    <van-nav-bar>
      <template #left>
        <van-icon name="zuojiantou" class-prefix="iconfont" size="26px" @click="$router.back()"></van-icon>
        <p style="font-size: 18px">已选择{{ result.length }}项</p>
      </template>
      <template #right>
        <p style="font-size: 14px" @click="selectAll">{{ selectAllText }}</p>
      </template>
    </van-nav-bar>
    <!--  内容区域  -->
    <div>
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div v-for="(item,index) in playlist" :key="index">
          <van-row align="center" type="flex" justify="center" style="background-color: #ffffff">
            <van-col span="3" style="padding-left: 10px">
              <van-checkbox :name="item.id" shape="square" checked-color="#ee0a24"></van-checkbox>
            </van-col>
            <van-col span="4">
              <img :src="item.coverImgUrl" style="width: 60px;height: 60px">
            </van-col>
            <van-col span="15" style="">
              <p style="font-size: 16px">{{ item.name }}</p>
              <p style="font-size: 12px;margin-top: -10px">{{ item.trackCount }}首</p>
            </van-col>
            <van-col span="2">
              <van-icon name="caidan" class-prefix="iconfont" size="18px"></van-icon>
            </van-col>
          </van-row>
        </div>
      </van-checkbox-group>
      <div style="bottom: 0;width: 100%;height: 100px;position: fixed;">
        <van-divider
          :style="{ color: '#f8f9fd', borderColor: '#666', padding: '0 16px' }"></van-divider>
        <div style="text-align: center;padding-bottom:9px" @click="delPlayList">
          <van-icon size="22px" name="shanchu3" class-prefix="iconfont"></van-icon>
          <p style="margin-top: 2px">删除</p>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {delPlayList} from "../../api/playlist";

export default {
  name: "delPlayList",
  data() {
    return {
      playlist: JSON.parse(this.$route.query.playList),
      selectAllText: '全选',
      result: [],
    }
  },
  created() {
    this.playlist.forEach(item => {
      item.checkbox = false  // 初始化复选框
    })
  },
  methods: {
    // 进行全选操作
    selectAll() {
      let self = this
      if (this.selectAllText === '全选') {
        this.$refs.checkboxGroup.toggleAll(true);
        self.selectAllText = '取消全选'
      } else {
        this.$refs.checkboxGroup.toggleAll();
        self.selectAllText = '全选'
      }
      console.log(this.result)
    },
    // 进行删除歌单
    delPlayList() {
      this.$dialog.confirm({
        message: '确定要删除歌单吗？',
        theme: 'round-button',
      })
        .then(() => {
          let id = this.result.toString()
          delPlayList(id).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              this.$toast.success('删除成功');
            } else {
              this.$toast.success('删除失败');
            }
          })
          // on confirm
        })
        .catch(() => {
          // on cancel
        });

    }
  }
}
</script>

<style scoped lang="scss">

</style>
